<template>
  <div class="left">
    <div class="left-top">
      <div class="list-item">
        <div class="list">
          <p>新增确诊TOP10</p>
        </div>
        <div class="tu">
          <div id="main" style="width: 100%; height: 220px"></div>
        </div>
      </div>
    </div>
    <div class="left-top">
      <div class="list-item">
        <div class="list">
          <p>大洲感染总人数趋势图</p>
        </div>
        <div class="tu">
          <div id="main1"></div>
        </div>
      </div>
    </div>
    <div class="left-top">
      <div class="list-item">
        <div class="list">
          <p>大洲感染人数饼状图</p>
        </div>
        <div class="tu">
          <div id="main3" style="width: 100%; height: 100%"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import $ from "jquery";

export default {
  data() {
    return {};
  },
  mounted() {
    let p = new Promise((resolve, reject) => {
      $.ajax({
        url: "https://view.inews.qq.com/g2/getOnsInfo?name=disease_foreign",
        dataType: "jsonp",
        success(res) {
          let data = JSON.parse(res.data);
          // console.log(data, "data");
          resolve(data);
        },
        error(err) {
          reject(err);
        },
      });
    });
    p.then((res) => {
      // console.log(res.countryAddConfirmRankList);
      // 左1
      let leftone = document.getElementById("main");
      let main = this.img1(res.countryAddConfirmRankList);
      this.addCharts(leftone, main);
      //左2
      let lefttow = document.getElementById("main1");
      let main1 = this.img2(res.continentStatis);
      this.addCharts(lefttow, main1);
      //左3
      let leftthtee = document.getElementById("main3");
      let main3 = this.img3(res.continentStatis);
      this.addCharts(leftthtee, main3);
    });
  },
  methods: {
    //1.初始echerts
    addCharts(dom, option) {
      let myChart = echarts.init(dom);
      option && myChart.setOption(option);
      //监听
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    img1(data) {
      let xAxis = [];
      let yAxis = [];
      data.forEach((item) => {
        xAxis.push(item.nation);
        yAxis.push(item.addConfirm);
      });
      let option = {
        // backgroundColor: '#00265f',
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          top: "15%",
          right: "3%",
          left: "13%",
          bottom: "20%",
        },
        xAxis: [
          {
            type: "category",
            data: xAxis,
            axisLine: {
              lineStyle: {
                color: "rgba(255,255,255,0.12)",
              },
            },

            axisLabel: {
              margin: 10,
              interval: 1,
              color: "#e2e9ff",
              textStyle: {
                fontSize: 8,
              },
            },
          },
        ],
        yAxis: [
          {
            axisLabel: {
              formatter: "{value}",
              color: "#e2e9ff",
            },
            axisLine: {
              show: false,
            },
            // splitLine: {
            //   lineStyle: {
            //       color: 'rgba(255,255,255,0.12)'
            //   }
            // },
          },
        ],
        series: [
          {
            type: "bar",
            data: yAxis,
            barWidth: "10",
            itemStyle: {
              normal: {
                color: "rgba(0,77,167,1)", // 100% 处的颜色
                barBorderRadius: [30, 30, 30, 30],
                shadowColor: "rgba(0,160,221,1)",
                shadowBlur: 4,
              },
            },
            // label: {
            //   normal: {
            //     show: true,
            //     lineHeight: 30,
            //     width: 80,
            //     height: 30,
            //     backgroundColor: "rgba(0,160,221,0.1)",
            //     borderRadius: 200,
            //   },
            // },
          },
        ],
      };

      return option;
    },
    img2(listdata) {
      console.log(listdata, "2");
      var chartDom = document.getElementById("main1");
      var myChart = echarts.init(chartDom);
      var option;

      //数据
      var xData = [];
      var yData1 = [];
      var yData2 = [];
      var yData3 = [];
      var yData4 = [];
      var yData5 = [];
      for (const item of listdata) {
        xData.push(item.date);
        yData1.push(item.statis["亚洲"]);
        yData2.push(item.statis["北美"]);
        yData3.push(item.statis["大洋洲"]);
        yData4.push(item.statis["欧洲"]);
        yData5.push(item.statis["其他"]);
      }
      option = {
        // backgroundColor: '#043491',
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
        },
        legend: {
          x: "center",
          textStyle: {
            color: "#f2f2f2",
            fontSize: 13,
          },
          icon: "circle",
          data: ["亚洲", "北美", "大洋洲", "欧洲", "其他"],
        },

        grid: {
          right: "5%",
          bottom: "1%",
          left: "2%",
          // top: "80px",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: xData,
            name: "时间",
            nameTextStyle: {
              color: "#d4ffff",
            },
            axisLine: {
              lineStyle: {
                color: "#0B4CA9",
              },
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 6,

              show: true,
              textStyle: {
                color: "#FFF",
                fontSize: 12,
              },
              //interval:0,
              //rotate:30
            },
          },
        ],
        yAxis: [
          {
            type: "value",

            nameTextStyle: {
              color: "#d4ffff",
            },
            position: "left",
            axisLine: {
              lineStyle: {
                color: "#0B4CA9",
              },
            },
            splitLine: {
              lineStyle: {
                color: "#0B4CA9",
              },
            },
            axisLabel: {
              color: "#d4ffff",
              fontSize: 12,
            },
          },
        ],
        series: [
          {
            name: "亚洲",
            type: "line",
            yAxisIndex: 0,
            symbolSize: 2,
            itemStyle: {
              normal: {
                color: "#FC30EE",
              },
            },
            data: yData1,
          },
          {
            name: "北美",
            type: "line",
            yAxisIndex: 0,
            symbolSize: 2,
            itemStyle: {
              normal: {
                color: "red",
              },
            },
            data: yData2,
          },
          {
            name: "欧洲",
            type: "line",
            yAxisIndex: 0,
            symbolSize: 2,
            itemStyle: {
              normal: {
                color: "pink",
              },
            },
            data: yData3,
          },
          {
            name: "大洋洲",
            type: "line",
            yAxisIndex: 0,
            symbolSize: 2,
            itemStyle: {
              normal: {
                color: "blue",
              },
            },
            data: yData4,
          },
          {
            name: "其他",
            type: "line",
            yAxisIndex: 0,
            symbolSize: 2,
            itemStyle: {
              normal: {
                color: "green",
              },
            },
            data: yData5,
          },
        ],
      };

      option && myChart.setOption(option);
    },
    img3(vvvvv) {
      var data2 = [];
      var data1 = [];
      for (let val of vvvvv) {
        data2.push(val.statis["欧洲"]);
        data1.push(val.statis["北美洲"]);
      }
      let option = {
        color: ["#1089E7", "#F57474"],

        tooltip: {
          trigger: "item",
        },
        legend: {
          bottom: "5%",
          left: "center",
        },
        series: [
          {
            name: "各州感染人数",
            type: "pie",
            radius: ["40%", "60%"],
            // avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              // borderColor: "#FFFFFF",
              borderWidth: 5,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              // label: {
              //   show: true,
              //   fontSize: '40',
              //   fontWeight: 'bold'
              // }
            },
            // labelLine: {
            //   show: false
            // },
            data: [
              { value: data1, name: "北美洲" },
              { value: data2, name: "欧洲" },
            ],
          },
        ],
      };
      return option;
    },
  },
};
</script>

<style lang="scss" scoped>
.left {
  width: 25%;
  height: 100%;
  //   background-color: yellow;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  .left-top {
    .tu {
      width: 100%;
      height: 85%;
      #main {
        width: 1000px;
        height: 100px;
      }
    }
    .list {
      width: 100%;
      height: 15%;
      display: flex;
      align-items: center;
      justify-content: center;
      p {
        font-size: 1.042vw;
      }
    }
    width: 100%;
    margin-top: 10px;
    height: 33%;
    // background-color:green;
    display: flex;
    align-items: center;
    justify-content: center;
    .list-item {
      width: 95%;
      height: 95%;
      border: 3px solid #063169;
      background: linear-gradient(to top, #306eef, #306eef) left top no-repeat,
        /*上左*/ linear-gradient(to right, #306eef, #306eef) left top no-repeat,
        /*左上*/ linear-gradient(to left, #306eef, #306eef) right top no-repeat,
        /*上右*/ linear-gradient(to bottom, #306eef, #306eef) right top
          no-repeat,
        /*上右*/ linear-gradient(to left, #306eef, #306eef) left bottom
          no-repeat,
        /*下左*/ linear-gradient(to bottom, #306eef, #306eef) left bottom
          no-repeat,
        /*左下*/ linear-gradient(to top, #306eef, #306eef) right bottom
          no-repeat,
        /*下右*/ linear-gradient(to left, #306eef, #306eef) right bottom
          no-repeat; /*右下*/
      background-size: 2px 16px, 16px 2px, 2px 16px, 16px 2px;

      // background-color: bisque;
      #main1 {
        width: 450px;
        // height: 20px;
        height: 232px;
      }
    }
  }
}
</style>